<template>
  <div>
    <main class="flex-1 p-6 overflow-y-auto bg-white">
      <h1 class="text-2xl font-bold text-gray-800 mb-6">首页</h1>

      <!-- 功能模块网格 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
        <!-- <div class="module-content">
          <div class="module-icon bg-green-100 text-green-600">
            <i class="fas fa-search text-2xl"></i>
          </div>
          <div class="module-info">
            <div class="module-title">订单查询</div>
            <div class="module-desc">可查询产品、服务和文档日期。</div>
          </div>
        </div> -->
        <div class="module-content" @click="handleSearchOrder">
          <div class="top_icons">
            <div class="module-icon bg-green-100 text-green-600">
              <i class="fas fa-search text-2xl"></i>
            </div>
            <div class="module-title">您的询单</div>
          </div>
          <div class="module-desc">咨询产品、性能、交货日期</div>
        </div>

        <!-- <div class="module-content" @click="handleOrderManagement">
          <div class="module-icon bg-blue-100 text-blue-600">
              <i class="fas fa-truck text-2xl"></i>
            </div>
          <div class="module-info">
            <div class="module-title">订单跟踪</div>
            <div class="module-desc">可追踪订单、取消订单和下载发票。</div>
          </div>
        </div> -->
        <div class="module-content" @click="handleOrderManagement">
          <div class="top_icons">
            <div class="module-icon bg-blue-100 text-blue-600">
              <i class="fas fa-truck text-2xl"></i>
            </div>
            <div class="module-title">您的订单</div>
          </div>
          <div class="module-desc">订单追踪、取消订单、下载发票</div>
        </div>

        <!-- <div class="module-content" @click="handleAuthenticationAndSecurity">
          <div class="module-icon bg-purple-100 text-purple-600">
            <i class="fas fa-lock text-2xl"></i>
          </div>
          <div class="module-info">
            <div class="module-title">登录和安全</div>
            <div class="module-desc">可编辑登录和手机号。</div>
          </div>
        </div> -->
        <div class="module-content" @click="handleAuthenticationAndSecurity">
          <div class="top_icons">
            <div class="module-icon bg-purple-100 text-purple-600">
              <i class="fas fa-lock text-2xl"></i>
            </div>
            <div class="module-title">登录和安全</div>
          </div>
          <div class="module-desc">编辑、登录和手机号</div>
        </div>

        <!-- <div class="module-content" @click="handleAddressManagement">
          <div class="module-icon bg-yellow-100 text-yellow-600">
            <i class="fas fa-map-marked-alt text-2xl"></i>
          </div>
          <div class="module-info">
            <div class="module-title">地址管理</div>
            <div class="module-desc">可编辑、删除和设置默认收货地址。</div>
          </div>
        </div> -->

        <div class="module-content" @click="handleAddressManagement">
          <div class="top_icons">
            <div class="module-icon bg-yellow-100 text-yellow-600">
              <i class="fas fa-map-marked-alt text-2xl"></i>
            </div>
            <div class="module-title">您的地址</div>
          </div>
          <div class="module-desc">编辑、删除、设置默认收货地址</div>
        </div>


      </div>
    </main>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router'

const { t } = useI18n()
const router = useRouter()

// 若需要添加逻辑（如点击事件）可在此处编写
const handleAddressManagement = () => {
  router.push('/address')
}

const handleAuthenticationAndSecurity = () => {
  router.push('/authenticationAndSecurity')
}

const handleOrderManagement = () => {
  router.push('/ordermange')
}
const handleSearchOrder = () => {
  router.push('/searchOrder')
}
</script>

<style scoped lang="less">
.card {
  background: white;
  border-radius: 12px;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  /* 新增：去除链接下划线 */
}

.card:hover {
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.hover-lift {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
}

/* 以下样式保持不变 */
.module-content {
  // display: flex;
  // align-items: center;
  gap: 16px;
  // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  height: 120px;
  padding: 10px;
  cursor: pointer;
  border: 1px solid #d7d7d7;
}

.module-content:hover {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  transform: translateY(-2px);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.module-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 10px;
}

.module-info {
  flex: 1;
}

.module-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #000;
}

.module-desc {
  font-size: 12px;
  color: #6b7280;
  padding: 10px 5px;
}

.box-card {
  width: 100vw;
  height: 72px;
  display: flex;
  justify-content: space-between;
  align-self: center;
  background-color: #fff;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  .clearfix {
    width: 300px;
    height: 70px;
    display: flex;
    align-items: center;

    img {
      width: 170px;
      height: 40px;
    }
  }

  .info {
    display: flex;
    align-items: center;

    .info-text {
      font-size: 12px;
      color: #6b7280;
      margin-left: 12px;
    }
  }
}

.con {
  display: flex;

  .card {
    width: 300px;
    margin: 0 20px 20px 0;
    padding: 20px;
  }

  .customer-manager {
    text-align: left;
  }

  .manager-info {
    display: flex;
    align-items: left;
    justify-content: left;
    margin: 10px 0;
  }

  .manager-info .el-avatar {
    margin-right: 10px;
  }

  .consult-button {
    width: 100%;
    margin: 10px 0;
    border: 1px solid #000;
    border-radius: 10px;
    padding: 3px 0;
    text-align: center;
  }

  .info {
    width: 300px;
  }
}

.top_icons {
  display: flex;
  align-items: center;

}
</style>
